﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
	<div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main"));  //基于准备好的dom，初始化ECharts图表
		var option = {  //指定图表的配置项和数据
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '某学院2020年专业招生情况汇总表', left: 70, top: 9 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019年招生'], left: 422, top: 8 },
			xAxis: {  //配置x轴坐标系
				data: ["大数据", "云计算", "ERP", "人工智能", "软件开发", "移动开发", "网络技术"]
			},
			yAxis: {},  //配置y轴坐标系
			series: [{  //配置数据系列
				name: '招生人数:',
				type: 'bar', barWidth: 55,  //设置柱状图中每个柱子的宽度
				data: [350, 200, 66, 210, 466, 200, 135]
			}]
		};
		myChart.setOption(option);  //使用刚指定的配置项和数据显示图表
		//回调函数处理鼠标点击事件并跳转到相应的百度搜索页面
		myChart.on('click', function (params) {
			var yt = alert("鼠标单击事件,您刚才单击了:" + params.name);

			window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
		});
		window.addEventListener("resize", function () {
			myChart.resize();  //使图表自适应窗口的大小
		});
		myChart.setOption(option);  //为echarts对象加载数据
	</script>
</body>

</html>